<template>
	<view class="userinfo">
		<view class="userinfo-main">
			<form @submit="formSubmit">
				<view class="hy-sr">
					<view class='hy-title'>性别</view>
					<view class="hy-right">
						<view @click="form.gender = 0">
							<image v-if="form.gender == 0" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/homemenu/radioActive.png" mode="">
							</image>
							<text v-else></text>
							男
						</view>
						<view @click="form.gender = 1">
							<image v-if="form.gender == 1" src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/homemenu/radioActive.png" mode="">
							</image>
							<text v-else></text>
							女
						</view>
					</view>
				</view>
				<view class="hy-sr">
					<view class='hy-title'>身高</view>
					<view class="hy-right1">
						<input @input="heightChange" v-model="form.height" type="number" maxlength="3"
							placeholder="输入身高" name='' placeholder-style="font-weight:400;color:#ccc"></input>
						<view class="hy-bifo">cm</view>
					</view>
				</view>
				<view class="hy-sr">
					<view class='hy-title'>体重</view>
					<view class="hy-right1">
						<input @input="weightChange" v-model="form.weight" type="digit" maxlength="5" placeholder="输入体重"
							name='' placeholder-style="font-weight:400;color:#ccc"></input>
						<view class="hy-bifo">kg</view>
					</view>
				</view>
				<view class="hy-sr" style="border-bottom: none;">
					<view class='hy-title'>出生日期</view>
					<view class="hy-right1">
						<view class="hy-time">
							<!-- <text v-if="!show">选择日期  <image src="../../../static/img/icon-right.png" mode=""></image></text> -->
							<picker mode="date" :value="form.birthday" :end="getDate()" @change="bindDateChange">
								<view class="uni-input"><text v-if="!show" style="color: #ccc;">选择日期</text><text
										style="color:#333;" v-else>{{ form.birthday }}</text>
									<image src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/icon-right.png" mode=""
										style="width: 18rpx;height: 20rpx;"></image>
								</view>
							</picker>
						</view>
					</view>
				</view>


				<view class="footer">
					<view @click="commit" class="footer-item">确认</view>
				</view>
			</form>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				value: '',
				show: false,
				date: '选择日期',
				form: {
					gender: 0,
					height: '',
					weight: '',
					birthday: '选择日期'
				}
			}
		},
		methods: {
			bindDateChange: function(e) {
				this.form.birthday = e.detail.value,
					this.show = true
			},
			weightChange(e) {
				let that = this
				var weight = e.detail.value
				weight = weight.replace(/\.{2,}/g, ".")
				weight = weight.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".")
				weight = weight.replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3')
				if (weight.indexOf(".") < 0 && weight != "") {
					weight = parseFloat(weight)
				}
				that.$nextTick(function() {
					that.form.weight = weight
				})
			},
			heightChange(e) {
				var height = e.detail.value
				this.form.height = height === 0 ? '' : height
				// this.$nextTick(() => {
				//  if (height == 0) {
				//   this.form.height = ''
				//  }else {
				//   this.form.height = height
				//  }
				// })
			},
			commit() {
				if (this.form.height == '' || this.form.weight == '' || this.form.birthday == '选择日期') {
					uni.showToast({
						title: '请完善资料',
						icon:'error'
					})
					return
				}
				if (this.form.weight >= 1000) {
					uni.showToast({
						title: '请输入正确的体重',
						icon:'none'
					})
					return
				}
				this.request.httpTokenJsonRequest('/mp-api/wx/user/improve/information', this.form, 'POST', false).then(
					res => {
						if (res.code == 0) {
							uni.showToast({
								icon: "success",
								title: "完善成功"
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 500)
						}
					})
			},
			getDate() {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss" scoped>
	body,
	.userinfo {
		height: 100%;
		min-height: 100%;
		background-position: center;
	}

	uni-page-body,
	html {
		height: 100%;
	}
</style>
